﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Treemap Demo Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		body{
			font-family: Verdana, Arial, Sans-Serif;
			font-size: 14px;
		}
		#map1{
			margin: 10px;
			padding: 5px;
			border: 1px solid #ccc;
			width: 550px;
			height: 350px;
		}
	</style>
	<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="treemap.js"></script>
	<script type="text/javascript">
		var treeData = [5, 15, 25, 
			[5, [
					22, 13, [
						2, 4
					],[
						1, 3, 15
					],[
						11, 3, 4
					]
				]
			],
			11, [
				11, 3, 4, 12
			],[
				22, 33, 11
			],
			18
		];
		$(function(){
			$("#map1").treemap(treeData);
		});
	</script>
</head>
<body>
	<h1>Treemap Demo Page</h1>
	<div id="map1"></div>
</body>
</html>